<template>
    <transition name="fade">
        <div v-if="myshow" class="category-model">
            <header class="category-header mui-bar mui-bar-nav">
                <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap="closePanel"></a>
                <h1 class="mui-title">分类搜索</h1>
            </header>
            <div class="slg-category mui-row mui-fullscreen">
                <div class="mui-col-xs-3" style="height: 100%;overflow-y: scroll">
                    <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical" style="height: 100%;background-color: #efeff4;">
                        <div v-for="({name}, index) in leftmenu" class="mui-control-item" :class="isfrist(index)" @tap="leftMenuSelect(index)">
                            <div class="left">{{name}}</div>
                        </div>
                    </div>
                </div>
                <div class="mui-col-xs-9 right-panel" style="overflow-y: scroll">
                    <div class="panel-content" v-if="rightpanel.tags && rightpanel.tags.length > 0" style="overflow-y: scroll">
                        <div v-for="tag in rightpanel.tags" v-if="tag.categories.length > 0" style="clear:both">
                            <div style="background-color: gray; width: 100%; height: 1px; margin-top: 15px;"></div>
                            <div style="margin: -10px auto 0 auto; background-color: white; width: fit-content">{{tag.name}}</div>
                            <div class="panel-item" v-for="{id, name, file} in tag.categories" @tap="serachCateory(id)">
                                <div class="item-img" :style="'background-image: url(' + webApiDomain + '/public/uploads/' + file.savepath + file.savename + ');'"></div>
                                <span class="item-text">{{name}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="panel-content" v-else style="overflow-y: scroll">
                        <div class="panel-item" v-for="{id, name, file} in rightpanel.categories" @tap="serachCateory(id)">
                            <div class="item-img" :style="'background-image: url(' + webApiDomain + '/public/uploads/' + file.savepath + file.savename + ');'"></div>
                            <span class="item-text">{{name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { fetchDomain } from 'assets/js/Lib'

export default {
    data() {
        return {
            leftmenu: [],
            rightpanel: [],
            myshow: false,
            defaultIndex: 0,
            isFirstUpdate: true,
        }
    },
    components: {

    },
    computed: {
        webApiDomain: function () {
            return fetchDomain;
        }
    },
    watch: {
        show: function () {
            this.myshow = this.show
        },
        menu: function () {
            this.leftmenu = this.menu
            this.rightpanel = this.menu[0]
        }
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        menu: {
            type: Array
        },
        defaultCategoryId: {
            default: null
        }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {


    },
    //在挂载开始之前被调用
    beforeMount() {

    },
    //已成功挂载，相当ready()
    updated() {
      console.log('defaultCategoryId', this.defaultCategoryId);
      console.log('this.menu', this.menu.length);
      if (this.isFirstUpdate && this.menu.length > 0 && this.defaultCategoryId > 0) {
        for (let i in this.menu) {
          let item = this.menu[i];
          console.log('this.menu[i]', this.menu[i].id);
          if (item.id == this.defaultCategoryId) {
            this.defaultIndex = i;
            this.leftMenuSelect(i);
            this.isFirstUpdate = false;
            break;
          }
        }
      }
    },
    //相关操作事件
    methods: {
        isfrist: function (index) {
            return index == this.defaultIndex ? 'mui-active' : ''
        },
        leftMenuSelect: function (index) {
            this.rightpanel = this.leftmenu[index];
        },
        serachCateory: function (menu_id) {
//            let url = fetchDomain + '/app/product/index?category_id=' + menu_id
          let url = fetchDomain + '/views/category.html?category_id=' + menu_id;
            let pageConfig = {
                "id": url,
                "url": url,
                show: {
                    autoShow: true
                },
                waiting: {
                    title: '加载中...'
                }
            }

            mui.openWindow(pageConfig)
        },
        closePanel: function () {
            this.myshow = false
            this.$emit('changeCategoryShow')
        }
    }
}
</script>

<style lang="less">
.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s
}

.fade-enter,
.fade-leave-to
{
    opacity: 0
}

.category-model {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.category-header {
    box-shadow: 0 1px 0 #ccc !important;
    height: 1.375rem;
    padding-right: 0.3125rem;
    padding-left: 0.3125rem;
    &.mui-bar-nav.mui-bar .mui-icon {
        padding-right: 0.3125rem;
        padding-left: 0.3125rem;
    }
    &.mui-bar {
        background-color: #fff;
        height: 1.375rem;
        .mui-btn-link {
            color: #333333;
            margin-left: .3125rem;
            font-size: .5rem;
            line-height: 1.375rem;
        }
        .mui-icon {
            font-size: .75rem;
            position: relative;
            z-index: 20;
            padding-top: 0.3125rem;
            padding-bottom: 0.3125rem;
            color: #333333;
        }
    }
    .mui-title {
        width: 7.5rem;
        line-height: 1.375rem;
        font-size: .5rem;
        right: 1.25rem;
        left: 1.25rem;
    }
}

.category-header~.slg-category {
    padding-top: 1.375rem;
}

.slg-category {
    z-index: 9;
    background: #ffffff;
    .mui-segmented-control {
        .mui-control-item {
            border-bottom: .05rem solid #ffffff !important;
            font-size: .4375rem;
            line-height: 1.5625rem;
            width: 100%;
            &.mui-active {
                background-color: #ffffff !important;
                .left {
                    color: #FF0036;
                    border-left: .1rem solid #FF0036 !important;
                }
            }
        }
    }

    .right-panel {
        height: 100%;
        background-color: #ffffff;
    }
}

.panel-content {
    width: 100%;
    overflow: hidden;
    .panel-item {
        width: 2.5rem;
        float: left;
        padding: .2rem 0;

        .item-img {
            position: relative;
            width: 2.3rem;
            height: 2.3rem;
            margin: .1rem;
            background-color: rgba(0, 0, 0, 0.03);
            background-size: 100%;
            background-position: top center;
            background-repeat: no-repeat;
        }

        .item-text {
            width: 100%;
            display: block;
            padding: .1rem 0;
            font-size: .3rem;
            line-height: .4rem;
            text-align: center;
        }
    }
}
</style>
